<template>
  <div class="card-common-inner public-line-dayboard" @click="openMorning">
    <first-level-title title="每日看板">
      <div slot="other" class="other-text">更新时间：{{ dayTime || '' }}；单位：户</div>
    </first-level-title>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else>
      <sec-level-title title="发展" />
      <div class="dayboard-kpi">
        <div class="kpi-item" v-for="item in fzList" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="count">{{ item.val }}</div>
          <div class="percent">
            <span class="sub-percent">环比</span>
            <span :class="item.percent >=0 ? 'percent-up' : 'percent-down'">{{ item.percent }}%</span>
            <img v-if="item.percent >=0" src="~@/assets/imgs/publicline/index/arrow_up.png" />
            <img v-else src="~@/assets/imgs/publicline/index/arrow_down.png" />
          </div>
        </div>
      </div>
      <sec-level-title title="维系" />
      <div class="dayboard-kpi">
        <div class="kpi-item" v-for="item in wxList" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="count">{{ item.val }}</div>
          <div class="percent">
            <span class="sub-percent">环比</span>
            <span :class="item.percent >=0 ? 'percent-up' : 'percent-down'">{{ item.percent }}%</span>
            <img v-if="item.percent >=0" src="~@/assets/imgs/publicline/index/arrow_up.png" />
            <img v-else src="~@/assets/imgs/publicline/index/arrow_down.png" />
          </div>
        </div>
      </div>
      <sec-level-title title="交付" />
      <div class="dayboard-kpi mg10">
        <div class="kpi-item" v-for="item in jfList" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="count">{{ item.val }}</div>
          <div class="percent">
            <span class="sub-percent">环比</span>
            <span :class="item.percent >=0 ? 'percent-up' : 'percent-down'">{{ item.percent }}%</span>
            <img v-if="item.percent >=0" src="~@/assets/imgs/publicline/index/arrow_up.png" />
            <img v-else src="~@/assets/imgs/publicline/index/arrow_down.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firstLevelTitle from '@/components/common/firstLevelTitle.vue'
import secLevelTitle from '@/components/common/secLevelTitle.vue'

import { accountDate } from '@/api/common.js'
import { dayboard } from '@/api/publicline/index.js'
import * as dayjs from "dayjs"

export default {
  components: { firstLevelTitle, secLevelTitle },
  data() {
    return {
      isLoading: true,
      fzList: [
        { title: '移网发展' , val: 0, percent: 0 },
        { title: '固话发展' , val: 0, percent: 0 },
        { title: '宽带发展' , val: 0, percent: 0 },
        { title: '智家发展' , val: 0, percent: 0 },
      ],
      jfList: [
        { title: '2I交付' , val: 0, percent: 0 },
        { title: '装机' , val: 0, percent: 0 },
        { title: '移机' , val: 0, percent: 0 },
        { title: '修障' , val: 0, percent: 0 },
      ],
      wxList: [
        { title: '5G升级包' , val: 0, percent: 0 },
        { title: '5G迁转' , val: 0, percent: 0 },
        { title: '宽带提速包' , val: 0, percent: 0 },
        { title: '宽带续约' , val: 0, percent: 0 },
      ],
      dayId: '',
      dayTime: ''
    }
  },
  mounted() {
    this.getAccountDate()
  },
  methods: {
    // 获取账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = result[0].value
        this.dayTime = dayjs(this.dayId).format('YYYY-MM-DD')
        this.getDayboard()
      }
    },
    // 获取每日看板数据
    async getDayboard() {
      this.isLoading = true
      const res = await dayboard({ orgId: this.$isCeo ? this.$gridId : this.$dataPermission, dayId: this.dayId })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.fzList = [
          { title: '移网发展' , val: info.GSM_VALUE || 0, percent: info.GSM_HB },
          { title: '固话发展' , val: info.GH_VALUE || 0, percent: info.GH_HB },
          { title: '宽带发展' , val: info.KD_VALUE || 0, percent: info.KD_HB },
          { title: '智家发展' , val: info.ZJFZ_VALUE || 0, percent: info.ZJFZ_HB },
        ],
        this.jfList = [
          { title: '2I交付' , val: info.JF_2I_VALUE || 0, percent: info.JF_2I_HB },
          { title: '装机' , val: info.ZJ_VALUE || 0, percent: info.ZJ_HB },
          { title: '移机' , val: info.YJ_VALUE || 0, percent: info.YJ_HB },
          { title: '修障' , val: info.XZ_VALUE || 0, percent: info.XZ_HB },
        ],
        this.wxList = [
          { title: '5G升级包' , val: info.SJB_5G_VALUE || 0, percent: info.SJB_5G_HB },
          { title: '5G迁转' , val: info.QZ_5G_VALUE || 0, percent: info.QZ_5G_HB },
          { title: '宽带提速包' , val: info.KDTSB_VALUE || 0, percent: info.KDTSB_HB },
          { title: '宽带续约' , val: info.KDXY_VALUE || 0, percent: info.KDXY_HB },
        ]
        this.isLoading = false
      }
    },
    openMorning() {
      this.$open.call(this, '/publicline/board/morning');
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/card.less';
.public-line-dayboard {
  .sec-level-title {
    margin: 16px 0;
  }
  .mg10 {
    margin-bottom: 10px;
  }
  .dayboard-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: 10px;
    text-align: center;
    .kpi-item {
      width: 49%;
      &:nth-child(1), &:nth-child(3) {
        border-right: 1px solid rgba(245,245,245,1);
      }
      &:nth-child(1), &:nth-child(2) {
        margin-bottom: 18px;
      }
      .title {
        color: #666;
      }
      .count {
        font-size: 18px;
        margin: 6px 0;
      }
      .percent {
        font-size: 12px;
        img {
          width: 12px;
          padding-left: 4px;
        }
      }
      .sub-percent {
        color: #999;
        padding-right: 12px;
      }
      .percent-up {
        color: #FF6024;
      }
      .percent-down {
        color: #40BB3F;
      }
    }
  }
}
</style>